import React from 'react'
import { SearchBar,Button } from 'antd-mobile';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Toast } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
export default function Search() {
    const [list,setlist]=useState([
        "江城工程","校园夜跑","多巴胺","每天一千米","农业大学"
    ])
    const Navigate=useNavigate()
    const [value,setvalue]=useState('')
  return (
    <div >
   <NavBar style={{paddingLeft:'40px'}}
        back={
          <>
            <ArrowLeft onClick={()=>{
    Navigate(-1)
    }} />
          </>
        }
        // onBackClick={(e) => Toast.show('返回')}
      >
         <input placeholder='搜索动态关键字' value={value} onChange={(e)=>{
          setvalue(e.target.value)
         }} style={{width:'200px',height:'20px',backgroundColor:'rgb(247, 247, 247)',borderRadius:'20px',paddingLeft:'10px'
          ,marginLeft:'-30px'
         }}></input>
         <button style={{backgroundColor:'rgb(36, 200, 116)',color:'white',height:'28px',width:'60px',marginLeft:'10px',borderRadius:'25px',border:'0px'}} 
         onClick={()=>{
          Navigate(`/app/jie/${value}`)
         }}>搜索</button>
      </NavBar>




    
       <div style={{width:'90%',margin:'0 auto',marginTop:'20px'}}>
       <p><span>历史搜索</span><span style={{float:'right'}}>🚮</span></p>
       <div style={{marginTop:'10px'}}>
        {list.map(item=>{
          return <span style={{backgroundColor:'rgb(247, 247, 247)',padding:'7px',borderRadius:'10px',margin:"10px",display:'inline-block'}}>
            {item}
          </span>
        })}
       </div>
       <p >热门推荐</p>
       <div>
       {list.map(item=>{
          return <span style={{backgroundColor:'rgb(247, 247, 247)',padding:'7px',borderRadius:'10px',margin:"10px",display:'inline-block'}}>
            <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E6%90%9C%E7%B4%A2%E5%8A%A8%E6%80%81/u259.svg'></img>{item}
          </span>
        })}
       </div>
       </div>
    </div>
  )
}
